<template>
	<view class="box" :style="{background:circleStyle}">
		<div class="circle">
			<view class="boxContent">
				<view class="boxContent2">
					<view class="before" :style="{top: (100 - percent >= 50 ? 100 - percent + 6 : 100 - percent - 4) + '%'}"></view>
					<view class="bg" :style="{background: bgColor}"></view>
					<view class="after" :style="{top: (100 - percent >= 50 ? 100 - percent + 6 : 100 - percent - 4) + '%'}"></view>
				</view>
				<view class="percent">{{percent}}{{unit}}</view>
			</view>
		</div>
		
	</view>
</template>
<script>
	export default {
		name: "circle-percent",
		props: {
			circleStyle: {
				type: String,
				default: ""
			},
			bgColor: {
				type: String,
				default: "red"
			},
			percent: {
				type: String,
				default: "0"
			},
			unit: {
				type: String,
				default: "%"
			}
		},
		computed: {},
		data() {
			return {}
		},
		methods: {}
	}
</script>
<style lang="scss" scoped>
	
	.bg {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		
	}
	.circle{
		width: 105px;
		height: 105px;
		border-radius: 50%;
		background-color: #000;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.box {
		position: relative;
		//box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 110px;
		height: 110px;
		font-size: 36rpx;
		text-align: center;
		// background-color: red;
		border-radius: 50%;
		//margin: 20rpx 0;
		.boxContent {
			position: relative;
			width: 100px;
			height: 100px;
			border-radius: 50%;
			
			overflow: hidden;
			.boxContent2 {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				//border: 4rpx solid #fff;
				//box-sizing: border-box;
				overflow: hidden;
				.after {
					content: "";
					position: absolute;
					left: 50%;
					width: 300%;
					height: 300%;
					overflow: hidden;
					border-radius: 45%;
					transform: translate(-50%, -100%) rotate(0);
					animation: rotate 6s linear infinite;
					z-index: 10;
				}
				.after {
					border-radius: 44%;
					background-color: #000;
					transform: translate(-50%, -100%) rotate(0);
					animation: rotate 10s linear -5s infinite;
					z-index: 20;
				}
				@keyframes rotate {
					50% {
						transform: translate(-50%, -103%) rotate(180deg);
					}
					100% {
						transform: translate(-50%, -100%) rotate(360deg);
					}
				}
				
			}
			.percent {
				color: #fff;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				width: 100%;
				text-align: center;
				z-index: 90;
			}
		}
	}
</style>
